<script setup>
import { ref, reactive, computed, shallowRef, markRaw } from 'vue'

// 条件渲染示例数据
const showWelcome = ref(true)
const userRole = ref('guest')
const isLoggedIn = ref(false)
const hasPermission = ref(false)
const loadingState = ref('idle') // idle, loading, success, error
const notificationCount = ref(3)
const theme = ref('light')

// 动态组件示例数据
const currentComponent = ref('UserProfile')
const currentTab = ref('profile')
const currentView = ref('card')
const currentPage = ref('dashboard')

// 组件列表
const componentList = [
  { name: 'UserProfile', label: '用户资料', icon: '👤' },
  { name: 'Settings', label: '设置', icon: '⚙️' },
  { name: 'Messages', label: '消息', icon: '💬' },
  { name: 'Analytics', label: '分析', icon: '📊' }
]

const tabList = [
  { key: 'profile', label: '个人资料', icon: '👤' },
  { key: 'security', label: '安全设置', icon: '🔒' },
  { key: 'notifications', label: '通知设置', icon: '🔔' },
  { key: 'billing', label: '账单信息', icon: '💳' }
]

const viewModes = [
  { key: 'card', label: '卡片视图', icon: '🃏' },
  { key: 'list', label: '列表视图', icon: '📋' },
  { key: 'grid', label: '网格视图', icon: '⊞' },
  { key: 'table', label: '表格视图', icon: '📊' }
]

const pageRoutes = [
  { key: 'dashboard', label: '仪表板', icon: '📊' },
  { key: 'projects', label: '项目', icon: '📁' },
  { key: 'team', label: '团队', icon: '👥' },
  { key: 'reports', label: '报告', icon: '📈' }
]

// 模拟数据
const userData = reactive({
  name: '张三',
  email: 'zhangsan@example.com',
  avatar: '👨‍💻',
  role: '开发者',
  joinDate: '2023-01-15',
  projects: 12,
  tasks: 45
})

const projectData = ref([
  { id: 1, name: 'Vue学习项目', status: 'active', progress: 75, team: 4 },
  { id: 2, name: 'React管理系统', status: 'completed', progress: 100, team: 6 },
  { id: 3, name: 'Node.js API', status: 'planning', progress: 25, team: 3 },
  { id: 4, name: '移动端应用', status: 'active', progress: 60, team: 5 }
])

const teamMembers = ref([
  { id: 1, name: '李四', role: '前端开发', avatar: '👩‍💻', status: 'online' },
  { id: 2, name: '王五', role: '后端开发', avatar: '👨‍💼', status: 'offline' },
  { id: 3, name: '赵六', role: 'UI设计师', avatar: '👩‍🎨', status: 'busy' },
  { id: 4, name: '钱七', role: '产品经理', avatar: '👨‍💼', status: 'online' }
])

// 动态组件定义
const components = {
  UserProfile: markRaw({
    template: `
      <div class="component-content">
        <div class="profile-header">
          <div class="avatar">{{ userData.avatar }}</div>
          <div class="profile-info">
            <h3>{{ userData.name }}</h3>
            <p>{{ userData.role }}</p>
            <p>加入时间: {{ userData.joinDate }}</p>
          </div>
        </div>
        <div class="profile-stats">
          <div class="stat-item">
            <span class="stat-number">{{ userData.projects }}</span>
            <span class="stat-label">项目</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userData.tasks }}</span>
            <span class="stat-label">任务</span>
          </div>
        </div>
      </div>
    `
  }),
  
  Settings: markRaw({
    template: `
      <div class="component-content">
        <h3>⚙️ 系统设置</h3>
        <div class="settings-grid">
          <div class="setting-item">
            <label>主题模式</label>
            <select v-model="$parent.theme">
              <option value="light">浅色</option>
              <option value="dark">深色</option>
              <option value="auto">自动</option>
            </select>
          </div>
          <div class="setting-item">
            <label>语言设置</label>
            <select>
              <option>中文</option>
              <option>English</option>
            </select>
          </div>
          <div class="setting-item">
            <label>通知</label>
            <input type="checkbox" checked>
          </div>
        </div>
      </div>
    `
  }),
  
  Messages: markRaw({
    template: `
      <div class="component-content">
        <h3>💬 消息中心</h3>
        <div class="message-list">
          <div class="message-item">
            <div class="message-avatar">👨‍💻</div>
            <div class="message-content">
              <h4>项目更新通知</h4>
              <p>Vue学习项目已更新到最新版本</p>
              <span class="message-time">2分钟前</span>
            </div>
          </div>
          <div class="message-item">
            <div class="message-avatar">👩‍💼</div>
            <div class="message-content">
              <h4>会议提醒</h4>
              <p>团队周会将在30分钟后开始</p>
              <span class="message-time">28分钟前</span>
            </div>
          </div>
        </div>
      </div>
    `
  }),
  
  Analytics: markRaw({
    template: `
      <div class="component-content">
        <h3>📊 数据分析</h3>
        <div class="analytics-grid">
          <div class="analytics-card">
            <h4>访问量</h4>
            <div class="analytics-number">12,345</div>
            <div class="analytics-trend">↗️ +15%</div>
          </div>
          <div class="analytics-card">
            <h4>用户数</h4>
            <div class="analytics-number">8,901</div>
            <div class="analytics-trend">↗️ +8%</div>
          </div>
          <div class="analytics-card">
            <h4>转化率</h4>
            <div class="analytics-number">23.4%</div>
            <div class="analytics-trend">↘️ -2%</div>
          </div>
        </div>
      </div>
    `
  })
}

// 计算属性
const currentComponentData = computed(() => {
  return components[currentComponent.value] || components.UserProfile
})

// 为了在组件中可以直接访问userData，需要在父组件中提供这个值
defineExpose({
  userData,
  theme
})

const filteredProjects = computed(() => {
  return projectData.value.filter(project => {
    if (currentView.value === 'active') {
      return project.status === 'active'
    }
    return true
  })
})

// 记录最近操作
const lastAction = ref('')

// 执行权限相关操作
const performAction = (action) => {
  const actionNames = {
    read: '查看',
    write: '编辑',
    delete: '删除',
    manage: '管理'
  }
  
  if (userPermissions.value.includes(action)) {
    lastAction.value = `✅ 成功执行 ${actionNames[action]} 操作 (权限允许)`
  } else {
    lastAction.value = `❌ 无权执行 ${actionNames[action]} 操作 (权限不足)`
  }
  
  // 3秒后清除操作结果
  setTimeout(() => {
    lastAction.value = ''
  }, 3000)
}

const userPermissions = computed(() => {
  const permissions = {
    guest: ['read'],
    user: ['read', 'write'],
    admin: ['read', 'write', 'delete'],
    super: ['read', 'write', 'delete', 'manage']
  }
  return permissions[userRole.value] || []
})

// 方法
const toggleLogin = () => {
  isLoggedIn.value = !isLoggedIn.value
  if (!isLoggedIn.value) {
    userRole.value = 'guest'
    hasPermission.value = false
  }
}

const changeRole = (role) => {
  userRole.value = role
  hasPermission.value = ['admin', 'super'].includes(role)
}

const simulateLoading = () => {
  loadingState.value = 'loading'
  setTimeout(() => {
    loadingState.value = Math.random() > 0.3 ? 'success' : 'error'
  }, 2000)
}

const resetLoading = () => {
  loadingState.value = 'idle'
}

const switchComponent = (componentName) => {
  currentComponent.value = componentName
}

const switchTab = (tabKey) => {
  currentTab.value = tabKey
}

const switchView = (viewKey) => {
  currentView.value = viewKey
}

const switchPage = (pageKey) => {
  currentPage.value = pageKey
}

const getStatusColor = (status) => {
  const colors = {
    active: '#52c41a',
    completed: '#1890ff',
    planning: '#faad14',
    online: '#52c41a',
    offline: '#d9d9d9',
    busy: '#faad14'
  }
  return colors[status] || '#d9d9d9'
}

const getProgressColor = (progress) => {
  if (progress >= 80) return '#52c41a'
  if (progress >= 50) return '#faad14'
  return '#ff4d4f'
}
</script>

<template>
  <div class="component-switching">
    <!-- 页面标题 -->
    <div class="header">
      <h1 class="title">🔄 Vue 组件切换教程</h1>
      <p class="subtitle">掌握条件渲染和动态组件的使用技巧</p>
    </div>

    <!-- 组件切换概念介绍 -->
    <div class="section">
      <h2 class="section-title">📚 组件切换基础概念</h2>
      <div class="concept-grid">
        <div class="concept-card">
          <div class="concept-icon">🔀</div>
          <h3>条件渲染</h3>
          <p>根据条件动态显示或隐藏组件，使用 v-if、v-else-if、v-else、v-show</p>
        </div>
        
        <div class="concept-card">
          <div class="concept-icon">🎯</div>
          <h3>动态组件</h3>
          <p>使用 &lt;component :is="componentName"&gt; 动态切换不同的组件</p>
        </div>
        
        <div class="concept-card">
          <div class="concept-icon">⚡</div>
          <h3>性能优化</h3>
          <p>合理选择渲染方式，避免不必要的组件创建和销毁</p>
        </div>
      </div>
    </div>

    <!-- 条件渲染 -->
    <div class="section">
      <h2 class="section-title">🔀 条件渲染 (Conditional Rendering)</h2>
      
      <!-- v-if vs v-show -->
      <div class="subsection">
        <h3>v-if vs v-show</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>代码示例</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;!-- v-if: 条件为false时完全移除DOM --&gt;
  &lt;div v-if="showWelcome" class="welcome"&gt;
    欢迎回来！
  &lt;/div&gt;
  
  &lt;!-- v-show: 条件为false时设置display:none --&gt;
  &lt;div v-show="isLoggedIn" class="user-panel"&gt;
    用户面板
  &lt;/div&gt;
  
  &lt;!-- 多条件判断 --&gt;
  &lt;div v-if="userRole === 'admin'"&gt;
    管理员面板
  &lt;/div&gt;
  &lt;div v-else-if="userRole === 'user'"&gt;
    用户面板
  &lt;/div&gt;
  &lt;div v-else&gt;
    访客面板
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>实际效果</h4>
            <div class="demo-controls">
              <button 
                class="demo-btn"
                :class="{ active: showWelcome }"
                @click="showWelcome = !showWelcome"
              >
                {{ showWelcome ? '隐藏' : '显示' }} 欢迎信息
              </button>
              
              <button 
                class="demo-btn"
                :class="{ active: isLoggedIn }"
                @click="toggleLogin"
              >
                {{ isLoggedIn ? '退出' : '登录' }}
              </button>
            </div>
            
            <div class="demo-area">
              <div v-if="showWelcome" class="welcome-message">
                🎉 欢迎回来！今天是美好的一天。
              </div>
              
              <div v-show="isLoggedIn" class="user-panel">
                👤 用户面板 - 当前状态: 已登录
              </div>
              
              <div class="role-selector">
                <label>选择角色:</label>
                <select v-model="userRole" @change="changeRole(userRole)">
                  <option value="guest">访客</option>
                  <option value="user">普通用户</option>
                  <option value="admin">管理员</option>
                  <option value="super">超级管理员</option>
                </select>
              </div>
              
              <div class="role-panel">
                <div v-if="userRole === 'admin'" class="admin-panel">
                  🛡️ 管理员面板 - 拥有管理权限
                </div>
                <div v-else-if="userRole === 'user'" class="user-panel">
                  👤 用户面板 - 基础功能权限
                </div>
                <div v-else-if="userRole === 'super'" class="super-panel">
                  👑 超级管理员面板 - 所有权限
                </div>
                <div v-else class="guest-panel">
                  🚪 访客面板 - 仅查看权限
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="info-box">
          <h4>🔍 v-if vs v-show 对比</h4>
          <div class="comparison-table">
            <div class="comparison-row">
              <div class="comparison-header">特性</div>
              <div class="comparison-header">v-if</div>
              <div class="comparison-header">v-show</div>
            </div>
            <div class="comparison-row">
              <div>DOM操作</div>
              <div>创建/销毁元素</div>
              <div>切换display属性</div>
            </div>
            <div class="comparison-row">
              <div>性能</div>
              <div>切换开销高</div>
              <div>初始渲染开销高</div>
            </div>
            <div class="comparison-row">
              <div>适用场景</div>
              <div>条件很少改变</div>
              <div>频繁切换</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 复杂条件渲染 -->
      <div class="subsection">
        <h3>复杂条件渲染</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>加载状态管理</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="loading-demo"&gt;
    &lt;div v-if="loadingState === 'idle'"&gt;
      &lt;button @click="simulateLoading"&gt;开始加载&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div v-else-if="loadingState === 'loading'"&gt;
      &lt;div class="spinner"&gt;⏳ 加载中...&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div v-else-if="loadingState === 'success'"&gt;
      &lt;div class="success"&gt;✅ 加载成功！&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div v-else-if="loadingState === 'error'"&gt;
      &lt;div class="error"&gt;❌ 加载失败&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>加载状态演示</h4>
            <div class="loading-demo">
              <div v-if="loadingState === 'idle'" class="idle-state">
                <button class="demo-btn primary" @click="simulateLoading">
                  🚀 开始加载
                </button>
              </div>
              
              <div v-else-if="loadingState === 'loading'" class="loading-state">
                <div class="spinner">⏳</div>
                <p>正在加载数据...</p>
              </div>
              
              <div v-else-if="loadingState === 'success'" class="success-state">
                <div class="success-icon">✅</div>
                <p>数据加载成功！</p>
                <button class="demo-btn" @click="resetLoading">重新开始</button>
              </div>
              
              <div v-else-if="loadingState === 'error'" class="error-state">
                <div class="error-icon">❌</div>
                <p>数据加载失败，请重试</p>
                <button class="demo-btn" @click="resetLoading">重新开始</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 权限控制 -->
      <div class="subsection">
        <h3>权限控制渲染</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>基于权限的组件显示</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="permission-demo"&gt;
    &lt;!-- 基础权限检查 --&gt;
    &lt;button v-if="hasPermission" class="danger"&gt;
      删除数据
    &lt;/button&gt;
    
    &lt;!-- 多权限检查 --&gt;
    &lt;div v-if="userPermissions.includes('write')"&gt;
      &lt;button&gt;编辑&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div v-if="userPermissions.includes('delete')"&gt;
      &lt;button class="danger"&gt;删除&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div v-if="userPermissions.includes('manage')"&gt;
      &lt;button class="admin"&gt;管理&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>权限控制演示</h4>
            <div class="permission-demo">
              <div class="current-role">
                当前角色: <span class="role-badge">{{ userRole }}</span>
                权限: {{ userPermissions.join(', ') || '无' }}
              </div>
              
              <!-- 操作结果显示 -->
              <div class="action-result" v-if="lastAction">
                {{ lastAction }}
              </div>
              
              <div class="permission-actions">
                <button class="demo-btn" @click="performAction('read')">
                  📖 查看 (所有用户)
                </button>
                
                <button 
                  v-if="userPermissions.includes('write')"
                  class="demo-btn success"
                  @click="performAction('write')"
                >
                  ✏️ 编辑
                </button>
                
                <button 
                  v-if="userPermissions.includes('delete')"
                  class="demo-btn danger"
                  @click="performAction('delete')"
                >
                  🗑️ 删除
                </button>
                
                <button 
                  v-if="userPermissions.includes('manage')"
                  class="demo-btn admin"
                  @click="performAction('manage')"
                >
                  👑 管理
                </button>
              </div>
              
              <div v-if="!isLoggedIn" class="login-prompt">
                ⚠️ 请先登录以获取更多权限
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 动态组件 -->
    <div class="section">
      <h2 class="section-title">🎯 动态组件 (Dynamic Components)</h2>
      
      <!-- 基础动态组件 -->
      <div class="subsection">
        <h3>基础动态组件</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>代码示例</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="dynamic-component-demo"&gt;
    &lt;!-- 组件切换按钮 --&gt;
    &lt;div class="component-tabs"&gt;
      &lt;button 
        v-for="comp in componentList" 
        :key="comp.name"
        :class="{ active: currentComponent === comp.name }"
        @click="switchComponent(comp.name)"
      &gt;
        comp.icon  comp.label }}
      &lt;/button&gt;
    &lt;/div&gt;
    
    &lt;!-- 动态组件 --&gt;
    &lt;component 
      :is="currentComponent"
      :user-data="userData"
      class="dynamic-content"
    /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
const currentComponent = ref('UserProfile')
const componentList = [
  { name: 'UserProfile', label: '用户资料' },
  { name: 'Settings', label: '设置' },
  { name: 'Messages', label: '消息' }
]
&lt;/script&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>动态组件演示</h4>
            <div class="dynamic-component-demo">
              <div class="component-tabs">
                <button 
                  v-for="comp in componentList" 
                  :key="comp.name"
                  class="tab-btn"
                  :class="{ active: currentComponent === comp.name }"
                  @click="switchComponent(comp.name)"
                >
                  {{ comp.icon }} {{ comp.label }}
                </button>
              </div>
              
              <div class="dynamic-content">
                <component :is="currentComponentData" />
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 标签页组件 -->
      <div class="subsection">
        <h3>标签页组件</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>标签页实现</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="tab-container"&gt;
    &lt;div class="tab-header"&gt;
      &lt;button 
        v-for="tab in tabList" 
        :key="tab.key"
        :class="{ active: currentTab === tab.key }"
        @click="switchTab(tab.key)"
      &gt;
        tab.icon  tab.label 
      &lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class="tab-content"&gt;
      &lt;div v-if="currentTab === 'profile'"&gt;
        个人资料内容
      &lt;/div&gt;
      &lt;div v-else-if="currentTab === 'security'"&gt;
        安全设置内容
      &lt;/div&gt;
      &lt;!-- 其他标签页内容 --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>标签页演示</h4>
            <div class="tab-container">
              <div class="tab-header">
                <button 
                  v-for="tab in tabList" 
                  :key="tab.key"
                  class="tab-btn"
                  :class="{ active: currentTab === tab.key }"
                  @click="switchTab(tab.key)"
                >
                  {{ tab.icon }} {{ tab.label }}
                </button>
              </div>
              
              <div class="tab-content">
                <div v-if="currentTab === 'profile'" class="tab-panel">
                  <h4>👤 个人资料</h4>
                  <div class="profile-form">
                    <div class="form-group">
                      <label>姓名:</label>
                      <input type="text" :value="userData.name" readonly>
                    </div>
                    <div class="form-group">
                      <label>邮箱:</label>
                      <input type="email" :value="userData.email" readonly>
                    </div>
                    <div class="form-group">
                      <label>角色:</label>
                      <input type="text" :value="userData.role" readonly>
                    </div>
                  </div>
                </div>
                
                <div v-else-if="currentTab === 'security'" class="tab-panel">
                  <h4>🔒 安全设置</h4>
                  <div class="security-options">
                    <div class="security-item">
                      <span>两步验证</span>
                      <input type="checkbox" checked>
                    </div>
                    <div class="security-item">
                      <span>登录通知</span>
                      <input type="checkbox">
                    </div>
                    <div class="security-item">
                      <span>密码强度检查</span>
                      <input type="checkbox" checked>
                    </div>
                  </div>
                </div>
                
                <div v-else-if="currentTab === 'notifications'" class="tab-panel">
                  <h4>🔔 通知设置</h4>
                  <div class="notification-options">
                    <div class="notification-item">
                      <span>邮件通知</span>
                      <select>
                        <option>立即</option>
                        <option>每日摘要</option>
                        <option>关闭</option>
                      </select>
                    </div>
                    <div class="notification-item">
                      <span>推送通知</span>
                      <input type="checkbox" checked>
                    </div>
                  </div>
                </div>
                
                <div v-else-if="currentTab === 'billing'" class="tab-panel">
                  <h4>💳 账单信息</h4>
                  <div class="billing-info">
                    <div class="billing-item">
                      <span>当前套餐:</span>
                      <span class="plan-name">专业版</span>
                    </div>
                    <div class="billing-item">
                      <span>下次续费:</span>
                      <span>2024-02-15</span>
                    </div>
                    <div class="billing-item">
                      <span>费用:</span>
                      <span class="price">¥99/月</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 视图模式切换 -->
      <div class="subsection">
        <h3>视图模式切换</h3>
        <div class="demo-container">
          <div class="code-demo">
            <h4>多视图模式</h4>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="view-switcher"&gt;
    &lt;div class="view-controls"&gt;
      &lt;button 
        v-for="view in viewModes" 
        :key="view.key"
        :class="{ active: currentView === view.key }"
        @click="switchView(view.key)"
      &gt;
        view.icon  view.label 
      &lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class="view-content"&gt;
      &lt;!-- 卡片视图 --&gt;
      &lt;div v-if="currentView === 'card'" class="card-view"&gt;
        &lt;div v-for="item in items" class="card"&gt;
          &lt;!-- 卡片内容 --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;!-- 列表视图 --&gt;
      &lt;div v-else-if="currentView === 'list'" class="list-view"&gt;
        &lt;div v-for="item in items" class="list-item"&gt;
          &lt;!-- 列表项内容 --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
          </div>
          
          <div class="live-demo">
            <h4>项目视图切换</h4>
            <div class="view-switcher">
              <div class="view-controls">
                <button 
                  v-for="view in viewModes" 
                  :key="view.key"
                  class="view-btn"
                  :class="{ active: currentView === view.key }"
                  @click="switchView(view.key)"
                >
                  {{ view.icon }} {{ view.label }}
                </button>
              </div>
              
              <div class="view-content">
                <!-- 卡片视图 -->
                <div v-if="currentView === 'card'" class="card-view">
                  <div 
                    v-for="project in projectData" 
                    :key="project.id"
                    class="project-card"
                  >
                    <h5>{{ project.name }}</h5>
                    <div class="project-status">
                      <span 
                        class="status-badge"
                        :style="{ backgroundColor: getStatusColor(project.status) }"
                      >
                        {{ project.status }}
                      </span>
                    </div>
                    <div class="project-progress">
                      <div class="progress-bar">
                        <div 
                          class="progress-fill"
                          :style="{ 
                            width: project.progress + '%',
                            backgroundColor: getProgressColor(project.progress)
                          }"
                        ></div>
                      </div>
                      <span class="progress-text">{{ project.progress }}%</span>
                    </div>
                    <div class="project-team">
                      👥 {{ project.team }} 人
                    </div>
                  </div>
                </div>
                
                <!-- 列表视图 -->
                <div v-else-if="currentView === 'list'" class="list-view">
                  <div 
                    v-for="project in projectData" 
                    :key="project.id"
                    class="project-list-item"
                  >
                    <div class="project-name">{{ project.name }}</div>
                    <div class="project-info">
                      <span 
                        class="status-badge small"
                        :style="{ backgroundColor: getStatusColor(project.status) }"
                      >
                        {{ project.status }}
                      </span>
                      <span class="progress-info">{{ project.progress }}%</span>
                      <span class="team-info">👥 {{ project.team }}</span>
                    </div>
                  </div>
                </div>
                
                <!-- 网格视图 -->
                <div v-else-if="currentView === 'grid'" class="grid-view">
                  <div 
                    v-for="project in projectData" 
                    :key="project.id"
                    class="project-grid-item"
                  >
                    <div class="grid-header">
                      <h6>{{ project.name }}</h6>
                      <span 
                        class="status-dot"
                        :style="{ backgroundColor: getStatusColor(project.status) }"
                      ></span>
                    </div>
                    <div class="grid-progress">{{ project.progress }}%</div>
                  </div>
                </div>
                
                <!-- 表格视图 -->
                <div v-else-if="currentView === 'table'" class="table-view">
                  <table class="project-table">
                    <thead>
                      <tr>
                        <th>项目名称</th>
                        <th>状态</th>
                        <th>进度</th>
                        <th>团队</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="project in projectData" :key="project.id">
                        <td>{{ project.name }}</td>
                        <td>
                          <span 
                            class="status-badge small"
                            :style="{ backgroundColor: getStatusColor(project.status) }"
                          >
                            {{ project.status }}
                          </span>
                        </td>
                        <td>{{ project.progress }}%</td>
                        <td>👥 {{ project.team }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组件切换最佳实践 -->
    <div class="section">
      <h2 class="section-title">💡 组件切换最佳实践</h2>
      <div class="best-practices">
        <div class="practice-card">
          <div class="practice-icon">⚡</div>
          <h4>性能优化</h4>
          <ul>
            <li>频繁切换使用 v-show</li>
            <li>条件很少改变使用 v-if</li>
            <li>使用 keep-alive 缓存组件</li>
            <li>避免在模板中进行复杂计算</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">🎯</div>
          <h4>组件设计</h4>
          <ul>
            <li>保持组件的单一职责</li>
            <li>合理设计组件的 props</li>
            <li>使用事件进行组件通信</li>
            <li>避免组件间的强耦合</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">🔄</div>
          <h4>状态管理</h4>
          <ul>
            <li>合理管理组件状态</li>
            <li>使用计算属性处理派生状态</li>
            <li>避免不必要的响应式数据</li>
            <li>考虑使用状态管理库</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">🛡️</div>
          <h4>错误处理</h4>
          <ul>
            <li>提供组件加载失败的后备方案</li>
            <li>使用 ErrorBoundary 捕获错误</li>
            <li>合理处理异步组件加载</li>
            <li>提供用户友好的错误信息</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 练习任务 -->
    <div class="section">
      <h2 class="section-title">🎯 练习任务</h2>
      <div class="exercise-list">
        <div class="exercise-item">
          <h4>任务 1: 多步骤表单</h4>
          <p>创建一个多步骤表单，使用条件渲染控制步骤显示，包含进度指示器</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 2: 仪表板组件</h4>
          <p>创建一个仪表板，使用动态组件切换不同的图表和数据视图</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 3: 权限管理系统</h4>
          <p>实现基于角色的权限控制，不同角色显示不同的功能组件</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 4: 响应式布局</h4>
          <p>创建响应式布局组件，根据屏幕尺寸动态切换布局模式</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-switching {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

/* 页面头部 */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 章节样式 */
.section {
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
}

.subsection {
  margin-bottom: 30px;
}

.subsection h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #4facfe;
}

/* 概念网格 */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.concept-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.concept-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.concept-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.concept-card p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

/* 演示容器 */
.demo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.code-demo, .live-demo {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.code-demo h4, .live-demo h4 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-x: auto;
  margin: 0 0 15px 0;
}

.demo-area {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
}

/* 按钮样式 */
.demo-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 5px 5px 0;
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.demo-btn.primary {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.demo-btn.success {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
}

.demo-btn.danger {
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
}

.demo-btn.admin {
  background: linear-gradient(45deg, #ffecd2, #fcb69f);
  color: #333;
}

.demo-btn.active {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 演示控件 */
.demo-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* 欢迎信息 */
.welcome-message {
  background: rgba(79, 172, 254, 0.2);
  border: 1px solid rgba(79, 172, 254, 0.5);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: center;
}

/* 用户面板 */
.user-panel {
  background: rgba(86, 171, 47, 0.2);
  border: 1px solid rgba(86, 171, 47, 0.5);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: center;
}

/* 角色选择器 */
.role-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.role-selector label {
  font-weight: 500;
}

.role-selector select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* 角色面板 */
.role-panel {
  margin-bottom: 15px;
}

.admin-panel {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.5);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.super-panel {
  background: rgba(156, 39, 176, 0.2);
  border: 1px solid rgba(156, 39, 176, 0.5);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.guest-panel {
  background: rgba(158, 158, 158, 0.2);
  border: 1px solid rgba(158, 158, 158, 0.5);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

/* 加载状态 */
.loading-demo {
  text-align: center;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.spinner {
  font-size: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.success-state, .error-state {
  text-align: center;
}

.success-icon, .error-icon {
  font-size: 3rem;
  margin-bottom: 10px;
}

/* 权限演示 */
.permission-demo {
  text-align: center;
}

.current-role {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.role-badge {
  background: rgba(79, 172, 254, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.permission-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.login-prompt {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.5);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

/* 对比表格 */
.comparison-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.comparison-row {
  display: contents;
}

.comparison-row > div {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
}

.comparison-header {
  background: rgba(255, 255, 255, 0.2) !important;
  font-weight: bold;
}

/* 动态组件演示 */
.dynamic-component-demo {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.component-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tab-btn.active {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dynamic-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  min-height: 200px;
}

/* 组件内容样式 */
.component-content {
  color: white;
}

.component-content h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

/* 用户资料样式 */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.avatar {
  font-size: 4rem;
}

.profile-info h3 {
  margin: 0 0 5px 0;
  text-align: left;
}

.profile-info p {
  margin: 0 0 5px 0;
  opacity: 0.8;
}

.profile-stats {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #4facfe;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 设置样式 */
.settings-grid {
  display: grid;
  gap: 15px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.setting-item label {
  font-weight: 500;
}

.setting-item select,
.setting-item input {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* 消息样式 */
.message-list {
  display: grid;
  gap: 15px;
}

.message-item {
  display: flex;
  gap: 15px;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.message-avatar {
  font-size: 2rem;
}

.message-content h4 {
  margin: 0 0 5px 0;
  font-size: 1rem;
}

.message-content p {
  margin: 0 0 5px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.message-time {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* 分析样式 */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.analytics-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.analytics-card h4 {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.analytics-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #4facfe;
  margin-bottom: 5px;
}

.analytics-trend {
  font-size: 0.8rem;
}

/* 标签页容器 */
.tab-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.tab-header {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-content {
  padding: 20px;
}

.tab-panel {
  min-height: 200px;
}

.tab-panel h4 {
  margin: 0 0 20px 0;
  color: #4facfe;
}

/* 表单样式 */
.profile-form {
  display: grid;
  gap: 15px;
}

.form-group {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: center;
}

.form-group label {
  font-weight: 500;
}

.form-group input {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* 安全选项 */
.security-options {
  display: grid;
  gap: 15px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

/* 通知选项 */
.notification-options {
  display: grid;
  gap: 15px;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.notification-item select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* 账单信息 */
.billing-info {
  display: grid;
  gap: 15px;
}

.billing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.plan-name {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.price {
  color: #56ab2f;
  font-weight: bold;
  font-size: 1.1rem;
}

/* 视图切换器 */
.view-switcher {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.view-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.view-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.view-btn.active {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.view-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  min-height: 300px;
}

/* 卡片视图 */
.card-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.project-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.project-card h5 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.project-status {
  margin-bottom: 15px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: white;
  font-weight: bold;
}

.status-badge.small {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.project-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8rem;
  font-weight: bold;
}

.project-team {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 列表视图 */
.list-view {
  display: grid;
  gap: 10px;
}

.project-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.project-list-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.project-name {
  font-weight: 500;
  font-size: 1rem;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-info {
  font-weight: bold;
  color: #4facfe;
}

.team-info {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 网格视图 */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.project-grid-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.project-grid-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.grid-header h6 {
  margin: 0;
  font-size: 0.9rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.grid-progress {
  font-size: 1.2rem;
  font-weight: bold;
  color: #4facfe;
}

/* 表格视图 */
.table-view {
  overflow-x: auto;
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.project-table th,
.project-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.project-table th {
  background: rgba(255, 255, 255, 0.1);
  font-weight: bold;
  color: #4facfe;
}

.project-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* 信息框 */
.info-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #4facfe;
  margin-top: 20px;
}

.info-box h4 {
  margin: 0 0 15px 0;
  color: #4facfe;
}

/* 最佳实践 */
.best-practices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.practice-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.practice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.practice-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
}

.practice-card h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  text-align: center;
}

.practice-card ul {
  margin: 0;
  padding-left: 20px;
}

.practice-card li {
  margin-bottom: 5px;
  font-size: 0.85rem;
}

/* 练习任务 */
.exercise-list {
  display: grid;
  gap: 15px;
}

.exercise-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #56ab2f;
}

.exercise-item h4 {
  margin: 0 0 10px 0;
  color: #a8e6cf;
}

.exercise-item p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-switching {
    padding: 15px;
  }
  
  .demo-container {
    grid-template-columns: 1fr;
  }
  
  .concept-grid {
    grid-template-columns: 1fr;
  }
  
  .best-practices {
    grid-template-columns: 1fr;
  }
  
  .component-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .view-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .card-view {
    grid-template-columns: 1fr;
  }
  
  .grid-view {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  
  .project-info {
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-stats {
    gap: 20px;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .form-group {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  
  .comparison-table {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }
  
  .section {
    padding: 20px;
  }
  
  .tab-header {
    flex-direction: column;
  }
  
  .demo-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .permission-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .project-list-item {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .project-info {
    align-items: flex-start;
  }
}
</style>